<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      #app {
         height: 1200px;
      }

      .redbox {
         width: 200px;
         height: 200px;
         border-radius: 10px;
         background-color: red;
         font-size: 30px;
         color: white;
      }

      #box {
         position: relative;
         border: 1px solid black;
         width: 500px;
         height: 400px;
      }
   </style>
</head>

<body>
   <div id="app">
      <div id="box">
         <div class="redbox" v-drag>可拖拽元素</div>
      </div>
   </div>
</body>

</html>
<script src="./lib/vue.js"></script>
<!-- 拖拽的自定义指令代码 -->
<script src="./07_myDirectives.js"></script>

<script>
   const vm = new Vue({
      el: '#app',
      data: {

      }
   })
</script>